<template>
  <div class="maxs-1">
    <div class="img-12"></div>
    <div class="text-12">当前直播课程</div>
    <el-button class="m-2" @click="add"> </el-button>
    <video controls autoplay class="vi-1" ref="videoRef"></video>
  </div>
</template>

<script lang="ts" setup>
import { getVideo } from '@/services/index'
import type { arr4 } from '@/types'
import { ref, onMounted } from 'vue'
import Hls from 'hls.js'
const options = ref<arr4>([])
const value = ref()
const videoUrl = ref()
const videoRef = ref<HTMLMediaElement | null>(null)
const list = async () => {
  const res = await getVideo()
  options.value = res.data
  if (!value.value) {
    // 只有在 value 为空时才进行赋值
    value.value = res.data[0]?.id
    videoUrl.value = res.data[0]?.address
    switchVideo()
  }
}
const add = (id: number) => {
  console.log(videoUrl.value)
}

const switchVideo = () => {
  const hls = new Hls()

  if (Hls.isSupported()) {
    hls.loadSource(videoUrl.value) // 使用切换后的视频地址
    hls.attachMedia(videoRef.value!)
    // // 设置视频音量为正常值
    // videoRef.value!.muted = false
    // videoRef.value!.volume = 0.5 // 设置音量为 50%
  } else {
    console.error('HLS is not supported')
  }
}
onMounted(() => {
  videoUrl.value =
    'https://zlm-01.zafu.etianmu.com/100100506X/2_480/hls.m3u8?token=zafu'
  switchVideo()
  if (videoRef.value) {
    videoRef.value.muted = false // 取消静音
    videoRef.value.volume = 0.5 // 设置音量为 50%
  }
})
</script>

<style lang="scss" scoped>
.maxs-1 {
  width: 540px;
  height: 420px;
  background-image: url('../../assets/img/z-1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  margin: 0 5px;
  .img-12 {
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    background-image: url('../../assets/img/t-1.gif');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .text-12 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-family: 'Microsoft Yahei', Arial, 'sans-serif';
    font-size: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vi-1 {
    margin-top: 10px;
    width: 100%;
    height: 70%;
  }
  .m-2 {
    margin-top: 10px;
  }
}
</style>
